<!--
 * @Author: Seon.Hu SeonHu@126.com
 * @Date: 2023-11-24 14:09:28
 * @LastEditors: Seon.Hu SeonHu@126.com
 * @LastEditTime: 2024-01-16 16:18:43
 * @FilePath: \bg-vben\src\views\report\kanban\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="wrapEl">
    <AdCardList @register="registerList">
      <template #cover="{ Id, Thumbnail }">
        <Image
          alt="thumbnail"
          :src="Thumbnail"
          fallback="''"
          :preview="false"
          @click="handleView(Id)"
        />
      </template>
      <template #content="{ Id, Name }">
        <CardMeta @click="handleView(Id)">
          <template #description>{{ Name }}</template>
        </CardMeta>
      </template>
    </AdCardList>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card, Image } from 'ant-design-vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { router } from '@/router';

  import { AdCardList, useAdCardList } from '@/components/AdCardList';
  import { getRptKanbansSimple } from '@/api/report/kanban';

  import { columns } from './kanban.data';

  const CardMeta = Card.Meta;

  defineOptions({ name: 'MyKanbanPage' });

  const { t } = useI18n();

  const wrapEl = ref(null);

  const [registerList] = useAdCardList({
    // 表标题呈现器
    title: t('report.route.report.kanban.list'),
    // 表格数据接口请求对象
    api: getRptKanbansSimple,
    // 表单列信息 BasicColumn[]
    columns: columns,
    // 列表设置项
    listSetting: { redo: true, size: true, fullScreen: true },
    // 是否显示表格边框
    bordered: false,
  });

  /** 处理查看 */
  async function handleView(id: any) {
    let routeUrl = router.resolve({
      path: '/report/kanban/viewer',
      query: {
        id: id,
      },
    });
    window.open(routeUrl.href, '_blank');
  }
</script>
